<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-07-14 15:08:24
<<<<<<< HEAD
<<<<<<< HEAD
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-10 21:48:28
=======
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-10 17:52:41
>>>>>>> 9412502b99b728a658dcbd89e9bfe2e3bf5302b5
-->
<template>
  <!--1. 容器 -->
  <div ref="bottom1_container" id="container" style="height: 95%"></div>
</template>

<script>
import {Gauge} from '@antv/g2plot';
export default {
  data (){
    return{
       dataArr:[],
       percent:0
     }
  },
created(){
  
},
mounted(){
this.initChart()
},
methods:{
initChart(){
  const ticks = [0, 1 / 4, 2 / 4, , 3 / 4, 1];
const color = ['#00ff01', '#F2A53A','#E84B6A','#E54C6C','#B55FFE'];

  const gauge = new Gauge(this.$refs.bottom1_container,{
  percent: this.percent,
  range: {
    ticks: [0, 1],
    color: ['l(0) 0:#00ff01 0.25:#FAAD14 0.5: #E84B6A 0.75:#E54C6C 1:#B55FFE'],
  },
  indicator: {
    pointer: {
      style: {
        stroke: '#D0D0D0',
      },
    },
    pin: {
      style: {
        stroke: '#D0D0D0',
      },
    },
  },
  statistic: {
    title: {
      formatter: ({ percent }) => {
        if (percent < ticks[1]) {
          return '低';
        }
        if (percent < ticks[3]) {
          return '中';
        }if (percent < ticks[5]) {
          return '高';
        }
      },
      style: ({ percent }) => {
        return {
          fontSize: '26px',
          lineHeight: 1,
          color: percent < ticks[1] ? color[0] : percent < ticks[2] ? color[1] : color[2],
        };
      },
    },
    content: {
      offsetY: 18,
      style: {
        fontSize: '14px',
        color: '#4B535E',
      },
      formatter: () => '系统表现',
    },
  },
  });

  gauge.render();
  setInterval(()=>{
    if(this.percent < 0.7){
     this.percent+=0.01
     gauge.changeData(this.percent);
    }else{
      this.percent = 0.7
    }
  },50)
}
}
}
</script>




